<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div class="app">
        <div>
            <input type="text" v-model="parMSG">
            <h2>{{btnVal}}</h2>
            <cyan v-bind:message="parMSG"></cyan>
            <bbuuttoonn v-on:count="countPlus"></bbuuttoonn>
            <bbuuttoonn v-on:count="countPlus"></bbuuttoonn>
        </div>
    </div>
    <script>
        let cyanisChild = {
            template: '<h2>{{message}}</h2>',
            props: ['message']
        }
        let cyanButton = {
            template: '<button @click="valPlusPlus">{{val}}</button>',
            // data必须是函数 如果 data 是一个对象则会影响到其他实例
            data: function() {
                return {
                    val: 0
                }
            },
            methods: {
                valPlusPlus() {
                    this.val++;
                    // $emit(eventName) 触发绑定的事件
                    this.$emit('count')
                }
            }
        }
        const vm = new Vue({
            data: {
                parMSG: 'hello',
                btnVal: 1
            },
            components: {
                cyan: cyanisChild,
                bbuuttoonn: cyanButton
            },
            methods: {
                countPlus() {
                    this.btnVal++
                }
            }
        })
        vm.$mount('.app')
    </script>
</body>

</html>